<template>
  <div class="user-info flex-col">
    <div class="info-top flex-row">
      <!-- <img class="user-head" :src="userInfo.headimgurl ? userInfo.headimgurl : '@/assets/images/user.png'" mode="aspectFill" /> -->
      <img class="user-head"
        :src="headImgUrl" mode="aspectFill" />
      <div class="user-info-right flex-col">
        <span class="user-name" @click="clickDebugger" >{{ nickname }}</span>
        <!-- <span class="user-phone"><i class="user-info-phone_icon" v-if="!bindMobile"></i>{{bindMobile ? bindMobile : '暂未绑定手机'}}</span> -->
        <span class="user-phone" v-if="bindMobile">{{bindMobile}}</span>
        <span
          class="user-phone"
          v-else-if="showBindPhone"
          @click="show = true"
        ><i class="user-info-phone_icon"></i>绑定手机</span>
      </div>
      <div v-if="userInfo && Number(userInfo.parentCustId) === 6423223" class="user-service-centre" @click="$router.push('/serviceCentre')"><i class="icon-edit"></i>投诉建议</div>
    </div>
    <van-overlay :show="show" @click.self="show = false" z-index="9">
      <div class="user-info-bind_box">
        <div class="user-info-bind_box__top">
          <van-icon size="14" color="#fff" name="cross" class="cross-icon" @click.stop="show = false"/>
        </div>
        <div class="user-info-bind_box__main">
          <input
            type="text"
            class="user-info-bind_phone__input"
            placeholder="请输入手机号码"
            v-model.trim="linkPhone"
            @input="changeLinkPhone"
          >
          <div class="user-info-bind_phone__code_box">
            <input
              type="text"
              class="user-info-bind_phone__input"
              placeholder="请输入验证码"
              v-model="code"
            >
            <span
              :class="{
                'user-info-code_btn': true,
                'user-info-code_btn__laoding': codeLoading
              }"
              @click.stop="getPhoneCode"
            >{{codeText}}</span>
          </div>
          <div
            :class="{
              'user-info-btn': true,
              'user-info-btn_disabled': !verifyPhone || !code
            }"
            @click="clickBindPhone"
          >
            确认
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { Icon, Overlay, Toast } from 'vant'
export default {
  name: 'UserInfo',
  components: {
    [Overlay.name]: Overlay,
    [Icon.name]: Icon
  },
  data () {
    return {
      debugger: 0,
      debuggerTime: 0,
      show: false,
      bindPhone: false,
      linkPhone: '',
      code: '',
      codeLoading: false,
      codeText: '获取验证码'
    }
  },
  computed: {
    showBindPhone () {
      return this.bindPhone && !this.userInfo.linkMobile
    },
    userInfo () {
      if (this.$store.state.userInfo && this.$store.state.userInfo.wxUserInfo) {
        return this.$store.state.userInfo.wxUserInfo
      }
      return this.$store.state.userInfo
    },
    nickname () {
      if (this.userInfo) {
        if (this.userInfo.nickname) return this.userInfo.nickname
        if (this.userInfo.nickName) return this.userInfo.nickName
      }
      return '游客'
    },
    headImgUrl () {
      if (this.userInfo && this.userInfo.headimgurl) {
        return this.userInfo.headimgurl
      }
      if (this.userInfo && this.userInfo.avatarUrl) {
        return this.userInfo.avatarUrl
      }
      return require('@/assets/images/user.png')
    },
    // 校验手机号
    verifyPhone () {
      return /^1\d{10}/.test(this.linkPhone)
    },
    // 绑定的手机
    bindMobile () {
      if (this.userInfo && this.userInfo.linkMobile) {
        const phone1 = this.userInfo.linkMobile.slice(0, 3)
        const phone2 = this.userInfo.linkMobile.slice(7, 11)
        return phone1 + '****' + phone2
      } else {
        return false
      }
    }
  },
  methods: {
    changeLinkPhone (e) {
      console.log(e.target.value)
      const value = e.target.value.replace(/\D/g, '')
      this.linkPhone = value
    },
    clickBindPhone () {
      if (!this.verifyPhone || !this.code) {
        return
      }
      Toast.loading({
        message: '绑定中...',
        overlay: true,
        forbidClick: true,
        duration: 0
      })
    },
    clickDebugger () {

    }
  },
  mounted () {
    if (this.$browser.WeChat) {
      this.getSaasInfoPerm()
    }
  }
}
</script>
<style lang="less" scoped>
@icon-phone: '';
@icon-edit: 'https://qnimg.zowoyoo.com/img/84826/1657183542817.png';
.user-info {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1240;
    width: 100vw;
    .info-top {
      align-items: center;
      padding: 16px 0 0 23.5px;
      box-sizing: border-box;
      .user-head {
        width: 52.5px;
        height: 52.5px;
        border-radius: 50%;
        overflow: hidden;
      }
      .user-info-right {
        flex-grow: 1;
        justify-content: center;
        margin-left: 12px;
        .user-name {
          font-size: 20px;
          font-weight: 800;
          color: #FEFEFE;
        }
        .user-phone {
          font-size: 14px;
          color: #FFD3B5;
          margin-top: 8px;
          display: flex;
          align-items: center;
          .user-info-phone_icon {
            display: inline-block;
            width: 8px;
            height: 15px;
            background-image: url(@icon-phone);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            margin-right: 3px;
            opacity: .8;
          }
        }
        .user-id {
          font-size: 14px;
          font-weight: 500;
          color: #FEFEFE;
          opacity: 0.4;
        }
      }
      .user-info-bind_phone {
        padding-right: 25px;
        .user-info-phone_icon {
          display: inline-block;
          width: 16px;
          height: 23px;
          background-image: url(@icon-phone);
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          margin-bottom: 5px;
        }
        .user-info-phone_text {
          font-size: 12px;
          font-weight: 500;
          color: #FEFEFE;
        }
      }
      // .gift {
      //   display: flex;
      //   flex-direction: column;
      //   align-items: center;
      //   justify-content: center;
      //   padding-right: 26px;
      //   img {
      //     width: 33px;
      //     height: 33px;
      //   }
      //   span {
      //     font-size: 13px;
      //     font-weight: 500;
      //     color: #FEFEFE;
      //   }
      // }
      .user-service-centre {
        height: 30px;
        border-radius: 30px 0 0 30px;
        display: flex;
        align-items: center;
        background-color: rgba(243, 51, 41, .8);
        font-size: 12px;
        color: #fff;
        padding: 0 10px;
        > i {
          background: url(@icon-edit) no-repeat;
          width: 12px;
          height: 12px;
          background-size: 100% 100%;
          margin-right: 5px;
        }
      }
    }
    .user-info-bind_box {
      overflow: hidden;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 318px;
      // height: 335px;
      background: #FFFFFF;
      border-radius: 15px;
      .user-info-bind_box__top {
        position: relative;
        width: 100%;
        height: 75px;
        background: url('https://qnimg.zowoyoo.com/img/84826/1645607442751.png') no-repeat center;
        background-size: contain;
        .cross-icon {
          position: absolute;
          top: 10px;
          right: 12px;
        }
      }
      .user-info-bind_box__main {
        padding: 44px 27px 22px;
        box-sizing: border-box;
        .user-info-bind_phone__input {
          width: 100%;
          height: 44px;
          background: #FFFFFF;
          padding: 0 8px;
          border: 1px solid #DEDEDE;
          border-radius: 10px;
          box-sizing: border-box;
        }
        .user-info-bind_phone__code_box {
          width: 100%;
          height: 44px;
          margin-top: 13px;
          .user-info-bind_phone__input {
            width: 162px;
            margin-right: 11px;
          }
          .user-info-code_btn {
            display: inline-block;
            vertical-align: bottom;
            width: 90px;
            height: 44px;
            background: #0B8BEF;
            border-radius: 10px;
            font-weight: 400;
            color: #FFFFFF;
            font-size: 12px;
            text-align: center;
            line-height: 44px;
          }
          .user-info-code_btn__laoding {
            background: #DCDCDC;
          }
        }
        .user-info-btn {
          margin-top: 54px;
          height: 40px;
          background-color: #0B8BEF;
          border-radius: 20px;
          line-height: 40px;
          text-align: center;
          color: #fff;
        }
        .user-info-btn_disabled {
          background: #FFD3A3;
        }
      }
    }
    // .unbind-btn {
    //   width: 70px;
    //   position: absolute;
    //   right:15px;
    //   top: 35px;
    // }
  }
</style>
